<extend name="./base"/>
<block name="main">
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        {$albumData['album_name']}
                        <div class="pull-right" style="margin-top: -5px;">
                            <input type="file" id="create-photo" value="选择图片" multiple="multiple" name="create_photo">
                        </div>
                    </header>
                    <div class="panel-body">
                        <div class="media-gal isotope" id="gallery"
                             style="position: relative; overflow: hidden; height: 512.4px;">
                            <ul class="image">
                            <?php if(count($albumData['photos']) > 0):?>
                            <?php foreach($albumData['photos'] as $v):?>
                                <li>
                            <div ctime="<?=date('Y-m-d H:i',$v['ctime'])?>" photo-id="<?=$v['id']?>"
                                 class="images item  isotope-item photo-item"
                                 style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
                                <a title="<?=$v['photo_describe']?>">
                                    <img data-original="__PUBLIC__<?=$v['path']?>"  alt="" src="__PUBLIC__<?=$v['path']?>">
                                </a>
                                <a data-toggle="modal" href="#myModal" onclick="edit_photo(this);">
                                    <p><?=$v['photo_name']?></p></a>
                            </div>
                                </li>
                            <?php endforeach;?>
                            <?php endif;?>
                            </ul>
                        </div>

                        <!-- Modal -->
                        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
                             tabindex="-1" id="myModal" class="modal fade">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close"
                                                type="button">×
                                        </button>
                                        <h4 class="modal-title">编辑照片信息</h4>
                                    </div>

                                    <div class="modal-body row">

                                        <div class="col-md-5 img-modal">
                                            <img class="photo-modal-img" alt="" src="">
                                            <p class="mtop10"><strong>创建时间</strong>　<span
                                                    class="photo-modal-time"></span>
                                            </p>
                                            </p>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label>标题</label>
                                                <input class="form-control photo-modal-name" value=""
                                                       id="title">
                                            </div>
                                            <div class="form-group">
                                                <label>描述</label>
                                                                <textarea class="form-control photo-modal-describe"
                                                                          rows="2"></textarea>
                                            </div>
                                            <div class="pull-right">
                                                <button type="button"
                                                        class="btn btn-danger btn-sm del-photo">
                                                    删除
                                                </button>
                                                <button type="button"
                                                        class="btn btn-success btn-sm send-photo-data">
                                                    保存
                                                </button>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- modal -->

                    </div>
                </section>
            </div>
        </div>
    </div>
</block>
<block name="script">
    <script>
        edit_photo_id = 0;
        $(function () {
            var $container = $('#gallery');
            $container.isotope({
                itemSelector: '.item',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });

            $('#filters a').click(function () {
                var selector = $(this).attr('data-filter');
                $container.isotope({filter: selector});
                return false;
            });
        });
        function edit_photo(obj) {
            edit_photo_id = $(obj).parent().attr('photo-id');
            $('.photo-modal-img').attr('src', $(obj).prev().find('img').attr('src'));
            $('.photo-modal-name').val($(obj).find('p').text());
            $('.photo-modal-describe').val($(obj).prev().attr('title'));
            $('.photo-modal-time').html($(obj).parent().attr('ctime'));
        }
        //删除照片
        $('.del-photo').click(function () {
            $.ajax({
                type: "POST",
                url: "{:U('Xiangce/delPhoto',array('user_id'=>$myUserData['id']))}",
                data: {id: edit_photo_id},//填写ajax传送的数据
                success: function (data) {
                    if (data.status == 0) {
                        //删除当前页面的相册div
                        $("div[photo-id='" + edit_photo_id + "']").remove();
                    }
                    $('#myModal').modal('hide');
                    alert(data.message);
                }
            });
        });
        //编辑照片
        $('.send-photo-data').click(function () {
            //收集数据
            var photo_name = $('.photo-modal-name').val();
            var photo_describe = $('.photo-modal-describe').val();
            //发送ajax
            $.ajax({
                type: "POST",
                url: "{:U('Xiangce/editPhoto',array('user_id'=>$myUserData['id']))}",
                data: {
                    id: edit_photo_id,
                    photo_name: photo_name,
                    photo_describe: photo_describe
                },//填写ajax传送的数据
                success: function (data) {
                    if (data.status == 0) {
                        //更新原先的数据
                        $("div[photo-id='" + edit_photo_id + "'] p").html(photo_name);
                        $("div[photo-id='" + edit_photo_id + "'] a:eq(0)").attr('title', photo_describe);
                        alert(data.message);
                        $('#myModal').modal('hide');
                    } else {
                        alert(data.message);
                        $('#myModal').modal('hide');
                    }
                }
            });
        });
        $("#create-photo").on('change',function(){
            var formData = new FormData();
            $.each($('#create-photo')[0].files, function(i, file) {
                formData.append('upload_file[]', file);
            });

            $.ajax({
                url: '{:U("Update/photoUpload",array("album_id"=>$album_id))}',
                type: 'POST',
                cache: false,
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function(data){
                    alert(data.message);
                    if(data.status == '0')
                    {
                        window.location.href = window.location.href;
//                        var num = $('.photo-item').length+1;
//                        var x = (num%8)*252;
//                        var y = Math.floor(num/8)*259;
//                        $('#gallery').prepend('<div ctime="'+data.time+'" photo-id="'+data.id+'"\
//                    class="images item  isotope-item photo-item"\
//                    style="position: absolute; left: 0px; top: 0px; transform: translate3d('+x+'px, '+y+'px, 0px);">\
//                            <a title="没有图片描述">\
//                            <img alt="" src="__PUBLIC__'+data.path+'">\
//                            </a>\
//                            <a data-toggle="modal" href="#myModal" onclick="edit_photo(this);">\
//                    <p>没有图片名称</p></a>\
//                    </div>');
                    }

                }
            });

        });
        $('.image').viewer();
    </script>
</block>